<template>
  <div style="height: calc(20vh - 120px)">
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      :header-cell-style="{ textAlign: 'center' }"
      row-key="title"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column
        prop="serial_number"
        label="用户编号"
        width="110"
        sortable
        align="center"
      />
      <el-table-column prop="username" label="用户名称" width="120" sortable />
      <el-table-column prop="role" label="角色" width="80" sortable />
      <el-table-column prop="Image" label="头像" align="center" width="60">
        <template #default="scope">
          <el-image
            style="height: 36px; padding-top: 2px"
            :src="scope.row.Image"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        sortable
        width="80"
        align="center"
      />
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column prop="updateTime" label="修改时间" />
      <el-table-column label="操作" fixed="right" width="190">
        <template #default="scope">
          <el-button link icon="EditPen" type="primary" size="small">
            修改
          </el-button>
          <el-button link icon="Plus" type="primary" size="small">
            新增
          </el-button>
          <el-button link icon="Delete" type="primary" size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { user } from "@/api/system/user";

export default {
  data() {
    return {
      tableData: [],
      multipleSelection:[]
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      user().then((res) => {
        console.log("用户列表", res);
        this.tableData = res.data;
      });
    },
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
  },
};
</script>
<style></style>
